import React from 'react';
import PropTypes from 'prop-types';
import { Modal } from 'ywen-mobile-ui';
import BaseComponent from '../../components/common/baseComponent.js';
import { chunk } from '../../utils/func';

class GunModal extends BaseComponent {
  static propTypes = {
    selectFunc: PropTypes.func.isRequired,
  }

  numList = chunk(Array.from(new Array(51), (val, index) => index + 1), 3);

  state = {
    show: false,
    selectedGun: null,
  }

  show = () => {
    this.setState({ show: true });
  }

  close = () => {
    this.setState({ show: false });
  }

  selectGun = (e, gun) => {
    e.stopPropagation();
    this.setState({
      selectedGun: gun,
    });
    const { selectFunc } = this.props;
    selectFunc(gun);
  }

  render() {
    const { selectedGun, show } = this.state;
    if (!show) {
      return null;
    }
    const rows = this.numList.map((subList, index) => {
      const cells = subList.map((gun) => {
        return <div className={`gun-cell ${gun === selectedGun ? 'active' : ''}`} key={gun} onClick={e => this.selectGun(e, gun)}>{gun}</div>;
      });
      return (
        <div className="cell-row" key={index}>
          {cells}
        </div>
      );
    });
    return (
      <Modal className="gun-modal" touchFunc={this.close}>
        <div className="content">
          <div className="title">选择油枪号</div>
          <div className="gun-view">{rows}</div>
        </div>
      </Modal>
    );
  }
}

export default GunModal;
